<template>
  <body-index>
    <body-left title="推荐" slot="bodyLeft">
      <template slot="main">
        <article-list-mode
          @read="read"
          @loadingMore="loadingMore()"
          :articleList="list"
        ></article-list-mode>
      </template>
    </body-left>

    <body-right slot="bodyRight">
      <template slot="first">
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-12 border-bottom"
              style="height: 50px; line-height: 50px"
            >
              <strong>最新文章</strong>
            </div>

            <div
              class="col-12 body-right"
              v-for="(item, index) in list"
              :key="item.id"
            >
              <router-link
                v-if="index <= 4"
                :to="{
                  name: 'Article',
                  query: {
                    articleId: item.id + '',
                  },
                }"
              >
                <div class="body-right inline-block">
                  <span id="body-right-span" style="float: left">{{
                    item.title 
                  }}</span>
                  <span id="body-right-span" style="float: right"
                    ><i class="el-icon-view"></i>&nbsp;{{ item.views }}</span
                  >
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </template>

      <template slot="second">
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-12 border-bottom"
              style="height: 50px; line-height: 50px"
            >
              <strong>推荐关注</strong>
            </div>

            <div
              class="col-12 body-right"
              v-for="(item, index) in account"
              :key="item.user.info.id"
            >
              <router-link
                v-if="index <= 4"
                :to="{
                  name: 'UserInfo',
                  query: {
                    id: item.user.info.id + '',
                    type:'1',
                  },
                }"
              >
                <div class="body-right">
                  <div style="display: inline-block">
                    <el-avatar
                      :size="25"
                      :src="item.user.info.avatar"
                    ></el-avatar>
                  </div>
                  <span
                    style="position: relative; bottom: 5px"
                    id="body-right-span"
                  >
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ item.user.info.nick }}</span
                  >
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </template>
    </body-right>
  </body-index>
</template>

<script>
import BodyIndex from "../../pages/body/BodyIndex.vue";
import BodyLeft from "../../pages/body/BodyLeft.vue";
import BodyRight from "../../pages/body/BodyRight.vue";
import ArticleListMode from "../mode/ArticleListMode.vue";
import ArticleMode from "../mode/ArticleMode.vue";
import { fake } from "../../assets/fake";
export default {
  components: { BodyLeft, BodyIndex, BodyRight, ArticleListMode, ArticleMode },
  data() {
    return {
      loading: false,
      isList: true,
      articleIndex: -1,
      list: [],
      account: [],
    };
  },
  methods: {
    loadingMore() {
      setTimeout(() => {
        const val = this.list[0];
        this.list = [];
        this.list.push(val);
      }, 2000);
    },
    read(index) {
      this.articleIndex = index;
      let articleId = this.list[this.articleIndex].id;
      this.$router.push({
        name: "Article",
        query: {
          articleId: articleId,
        },
      });
      if (fake.self !== null) {
        fake.methods.operate(articleId, fake.self.info.id, "浏览");
      }
    },
    visitUser(id) {
      this.$router.push({
        name: "User",
        query: {
          id: id,
        },
      });
    },
    getWriter(writerId) {
      return fake.methods.getUserInfo(writerId);
    },
    getComments(articleId) {
      return fake.methods.getComments(articleId);
    },
  },
  mounted() {
    this.list = fake.article.list;
    this.account = fake.account;
  },
};
</script>

<style scoped>
.index {
  text-align: center;
}
.read {
  padding: 0 0;
  text-align: end;
}
.el-tag {
  margin-right: 10px;
}
strong {
  font-size: 1.25rem;
}
#span {
  border-width: 0 0 0 7px;
  border-color: skyblue;
  border-style: solid;
}
.icon {
  font-size: 15px;
}
a {
  color: rgba(0, 0, 0, 0.658);
  transition: all 0.3s;
}
a:hover {
  color: rgb(0, 0, 0);
  transition: all 0.3s;
}
#body-right-span {
  font-size: 14px;
  padding: 15px auto;
}
.body-right {
  margin-top: 5px;
}
a{
  text-decoration: none;
}
</style>